<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script crossorigin="anonymous" src="https://lib.baomitu.com/echarts/5.1.2/echarts.js"></script>
    <script src="./map/js/china.js"></script>
</head>

<body>
    <div class="wrap" style="position: relative;">
        <div id="map" style="width: 100%; height: 700px;"></div>
    </div>
</body>
<script>
    var myChart = echarts.init(document.getElementById('map'));
    var option;
    option = {
        backgroundColor: "#404a59",
        tooltip: {
            trigger: 'item'
        },
        visualMap: [
            {
                type: "piecewise",
                show: true,
                pieces: [
                    { min: 200 },
                    { min: 40, max: 199 },
                    { min: 10, max: 39 },
                    { min: 2, max: 9 },
                    { value: 1 },
                ],
                inRange: {
                    color: ["#34b7c3", "#12a8f6", "#ffd800", "#ff6c00", "#ff380b"],
                },
                itemWidth: 20,
                itemHeight: 10,
                itemGap: 8,
                textGap: 5,
                itemSymbol: "circle",
                textStyle: {
                    color: "#fff",
                    fontSize: 14,
                },
            },
        ],
        geo: {
            name: "数据分布",
            type: "map",
            map: "china",
            itemStyle: {
                areaColor: "#44ffab66",
                borderColor: "#45FFAD",
            },
            roam: true, //是否可以缩放
            zoom: 1.25,
            emphasis: {
                label: {
                    show: false,
                    color: "#fff",
                },
                itemStyle: {
                    areaColor: "#d3fdfc",
                    borderColor: "#0394d9",
                },
            },
            label: {
                normal: {
                    show: false, //初始地图是否显示省
                    color: "#fff",
                },
            },
        },
        series: [
            {
                name: "数据分布",
                type: "map",
                geoIndex: 0,
                data: [{ name: '北京', value: 10 }],
            },
        ],
    };
    myChart.setOption(option);
    myChart.on('click', (e)=>{console.log(e)})
</script>

</html>